"use client";

import { ReactNode, useEffect } from "react";
import { useNavigation } from "@/app/context/navigation-context";
import Sidebar from "@/app/components/explore/sidebar";
import ExploreContent from "@/app/components/explore/content";

interface ExploreLayoutProps {
  children?: ReactNode;
  sidebarWidth?: string;
}

export default function ExploreLayout({ children, sidebarWidth = '17%' }: ExploreLayoutProps) {
  const { setCurrentSection } = useNavigation();

  // 使用 useEffect 来设置当前导航区域
  useEffect(() => {
    setCurrentSection("explore");
  }, [setCurrentSection]);

  return (
    <div className="flex w-full h-[calc(100vh-var(--header-height))]">
      <div className="flex w-full h-full">
        <div style={{ width: sidebarWidth }} className="h-full overflow-y-auto border-r border-gray-200">
          <Sidebar />
        </div>
        <div className="flex-1 h-full overflow-hidden">
          {children}
        </div>
      </div>
    </div>
  );
}
